<template>
  <el-dialog :visible="uploadShow" title="批量添加线索" :close-on-click-modal="false" :close-on-press-escape="false" @close="closeUpload">
    <div class="upload-box">
      <div class="title-box">上传文件</div>
      <div class="upload-con-box">
        <div class="down-box">
          <span class="label ">第一次上传请下载</span>
          <el-button type="primary" @click="hanldeDownload">点击下载模板</el-button>
        </div>
        <div v-show="fileList.length<=0" class="upload-file down-box">
          <span class="label required">上传文件</span>
          <el-upload
            ref="upload"
            :action="uploadFileUrl"
            :before-upload="handleBeforeUpload"
            :file-list="fileList"
            :limit="1"
            :on-error="handleUploadError"
            :on-exceed="handleExceed"
            :on-success="handleUploadSuccess"
            class="upload-file-uploader"
            :auto-upload="false"
            :show-file-list="false"
          >
            <!-- 上传按钮 -->
            <el-button slot="trigger" icon="iconfont iconcus-upload" class="cus-search-btn" type="primary">上传</el-button>
          </el-upload>
        </div>

        <div v-show="fileList.length<=0" class="tip-box">
          <span>请上传xlsx或xls格式文件</span>
        </div>

        <div v-show="fileList.length>0" class="down-box mt30">
          <span class="label">已上传</span>
          <span class="text-btn" :class="{'text-bg':selectActived}" @mouseover="selectActived=true" @mouseout="selectActived=false">
            <span class="text">{{ fileList.length>0?fileList[0].name:'' }}</span>
            <i v-show="selectActived" class="icon el-icon-close del-btn" />
          </span>
          <!-- <div class="btn">
            <el-button class="primary-btn" icon="iconfont iconcus-upload" type="primary" @click="delHandle">删除</el-button>
          </div> -->
        </div>
        <div v-show="fileList.length>0" class="btn-box">
          <el-button class="cus-reset-btn">删除</el-button>
          <el-button class="cus-search-btn" :loading="loading">{{ loading?'上传中':'确 定' }}</el-button>
        </div>
      </div>
    </div>
    <div class="upload-box">
      <div class="title-box">结果
      </div>
      <div class="upload-result-box">
        <div class="down-box">
          <span class="text-btn text">
            系统导入数据 <span class="num">33</span>条
          </span>
        </div>
        <div class="down-box">
          <span class="text-btn text">
            导入失败数据 <span class="error-num">11</span>条
          </span>
        </div>
        <div class="down-box">
          <span class="text-btn text">
            成功导入数据 <span class="succes-num">22</span>条
          </span>
        </div>
      </div>
      <div class="btn-box">
        <el-button class="cus-search-btn" type="primary" @click="closeUpload">完成</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { Message } from 'element-ui'
import { utils, writeFileXLSX } from 'xlsx'
export default {
  props: {
    uploadShow: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      // 文件数组
      fileList: [],
      uploadFileUrl: '', // 文件上传的地址
      selectActived: true,
      loading: false// 上传加载
    }
  },
  methods: {

    /**
     * 上传成功
     */
    handleUploadSuccess() {

    },
    /**
     * 超出上传数量事件
     */
    handleExceed() {

    },
    /**
     * 上传失败事件
     */
    handleUploadError() {

    },
    /**
     * 文件上传事件
     */
    handleBeforeUpload() {

    },
    /**
     * 下载模板
     */
    async hanldeDownload() {
      // 创建一个工作表
      const worksheet = utils.json_to_sheet([])
      // 创建一个新的工作簿
      const workbook = utils.book_new()
      // 把工作表添加到工作簿
      utils.book_append_sheet(workbook, worksheet, 'Data')
      // 改写表头
      utils.sheet_add_aoa(worksheet, [['线索ID', '手机号', '渠道来源', '创建时间', '归属人', '线索状态']], { origin: 'A1' })
      writeFileXLSX(workbook, 'ClueList.xlsx')
      Message.success('模板下载成功！')
    },
    /**
     * 关闭弹窗
     */
    closeUpload() {
      this.$emit('update:uploadShow', false)
    }
  }
}
</script>

<style scoped lang="scss">
.upload-file-list .el-upload-list__item {
  border: 1px solid #e4e7ed;
  line-height: 2;
  margin-bottom: 10px;
  position: relative;
}
.upload-file-list .ele-upload-list__item-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: inherit;
}
.ele-upload-list__item-content-action .el-link {
  margin-right: 10px;
}

.upload-box{
    width: 100%;
  .title-box{
    margin: 0;
    padding: 0;
    width: 800px!important;
    height: 33px;
    line-height: 33px;
    font-size: 14px;
    font-weight: 500;
    color: #332929;
    display: flex;
    align-items: center;
    .btn{
      flex: 1;
      text-align: right;
      .img{
        width: 20px;
        height: 20px;
        cursor: pointer;
      }
    }
  }
  .upload-file{
    display: flex;
    margin-top: 30px;
  }
  .upload-con-box{
    border: 1px solid #000;
    padding: 10px 3px 80px 15px;
  }
  .down-box{
    display: flex;
    align-items: center;
    .label{
      width: 112px;
      height: 20px;
      font-size: 14px;
      font-weight: 400;
      color: #666666;
      line-height: 20px;
      text-align: right;
      margin-right: 35px;
    }
    .required::before{
      content: "*";
      color: #FD7065;
      margin-right: 4px;
    }
    .text-btn{
      font-size: 14px;
      font-weight: 400;
      color: #333333;
      height: 33px;
      line-height: 33px;
      border-radius: 3px;
      display: flex;
      cursor: pointer;
      align-items: center;
      padding: 0 16px 0 10px;
      flex:1;
      &:hover,&:active{
        color: #05CC95;
      }
      .text{
        flex:1;
      }
      .del-btn{
        width: 10px;
        height: 10px;
      }
      .img{
        // width: 20px;
        // height: 20px;
        font-size: 20px;
        margin-right: 4px;
      }
      .num{
        color: #333333;
      }
      .error-num{
        color: #FD7065;
      }
      .succes-num{
        color: #05CC95;
      }
    }
    .text-bg{
       flex: 1;
      background: #f9f9f9;
    }
    .btn{
      flex: 1;
      text-align: right;
    }
  }
  .btn-box{
    margin: 10px 10px 0 0;
    text-align: right;
  }
  .upload-result-box{
    border: 1px solid #000;
    padding: 17px 3px 40px 15px;
    .down-box{
        width: 150px!important;
    }
    .text{
      height: 30px;
      line-height: 30px;
      margin-top: 10px;
      &:first-child{
        margin-top: 0;
      }
    }
    .btn-box{
      text-align: right;
      margin-top: 39px;
    }
  }
  ::v-deep .el-button{
    .iconfont{
      margin-right: 6px;
    }
  }
  .tip-box{
    height: 17px;
    font-size: 12px;
    font-weight: 400;
    color: #fd7065;
    line-height: 17px;
    margin-top: 10px;
    padding-left: 147px;
  }
}
::v-deep .el-dialog__header{
    background: #8df;
}
</style>
